<template>
  <el-drawer
    :with-header="true"
    :visible.sync="drawer"
    direction="rtl"
    size="25%"
    show-close
    :append-to-body="true"
    :title="title"
  >
    <!-- <h3 style="margin-top: 50px" class="l-flex--row center" v-if="title">
      {{ title }}
    </h3> -->

    <!-- el-dialog__close el-icon el-icon-close -->
    <div class="line">
      <div class="label">审核意见</div>
      <div class="value">
        {{ form[fieldMap.status] == '1' ? '通过' : '驳回' }}
      </div>
    </div>
    <div class="line">
      <div class="label">审核时间</div>
      <div class="value">{{ form[fieldMap.time] }}</div>
    </div>
    <div class="line">
      <div class="label">备注</div>
      <div class="value">{{ form[fieldMap.desc] }}</div>
    </div>
    <div class="line">
      <div class="label">附件</div>
      <div class="value">
        <div
          style="color: #409eff"
          :key="index"
          class="l-flex--row"
          v-for="(item, index) in fileList"
        >
          <span
            class="u-pointer"
            style="word-break: break-all"
            @click="onDownload(item)"
          >
            {{ item.name }}
          </span>
          <i
            class="el-icon-download download"
            @click="onDownload(item, true)"
          ></i>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import Download from '@/views/_mixins/download';
export default {
  name: 'ReviewDraw',
  mixins: [Download],
  props: {
    title: {},
    fieldMap: {
      type: Object,
      default: () => ({
        status: 'auditStatus',
        time: 'auditTime',
        desc: 'auditDesc',
        attach: 'auditAttach'
      })
    }
  },
  data() {
    return {
      filePath,
      drawer: false,
      form: {}
    };
  },
  computed: {
    fileList() {
      if (!this.form[this.fieldMap.attach]) return [];
      return this.form[this.fieldMap.attach].split(',').map(i => {
        return { name: i.split('|')[1], fileUrl: i.split('|')[0] };
      });
    }
  },
  methods: {
    show(form) {
      this.drawer = true;
      this.form = form;
    },
    onDownload({ fileUrl: url, name }, download = false) {
      if (download) {
        this.downloadFile(url, name, null, true, false);
        return;
      }
      window.open(this.filePath + url);
      // const eleLink = document.createElement('a');
      // eleLink.style.display = 'none';
      // eleLink.href = this.filePath + url;
      // eleLink.download = false;
      // eleLink.target = '_blank';
      // document.body.appendChild(eleLink);
      // eleLink.click();
      // document.body.removeChild(eleLink);
    }
  }
};
</script>
<style lang="scss" scoped>
.line {
  line-height: 22px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 14px;
  color: #3d3d3d;
  height: 22px;
  margin-top: 24px;
  .label {
    flex: 0 0 100px;
  }
  .value {
    flex: 1;
  }
}
::v-deep .el-drawer__header {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.88);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: 20px;
  margin-bottom: 0;
  font-weight: 500;
}
.download {
  font-size: 16px;
  color: #409eff;
  cursor: pointer;
  margin-left: 26px;
}
</style>
